<template>
	<view class="container">
		<view class="bg" @click="tel('local_phone')">
			<image src="/static/img/user/contact1.png" mode="widthFix"></image>
			<view class="txt">
				<text>本地客服电话</text>
				<text>{{ local_phone }}</text>
			</view>
		</view>
		<view class="bg2" @click="tel('zongbu_phone')">
			<image src="/static/img/user/contact2.png" mode="widthFix"></image>
			<view class="txt">
				<text>总部客服电话</text>
				<text>{{ zongbu_phone }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			local_phone: '',
			zongbu_phone: ''
		};
	},
	onLoad() {
		let config = uni.getStorageSync('config');
		this.local_phone = config.local_phone;
		this.zongbu_phone = config.zongbu_phone;
	},
	methods: {
		tel(type) {
			if (type == 'local_phone') {
				uni.makePhoneCall({
					phoneNumber: this.local_phone
				});
			}
			else if(type == 'zongbu_phone'){
				uni.makePhoneCall({
					phoneNumber: this.zongbu_phone
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: calc(100% - 60upx);
	padding-top: 60upx;
	background-color: #f6f6f6;
}

.bg,
.bg2 {
	width: 90%;
	height: 350upx;
	background-image: url(/static/img/user/bg1.png);
	background-size: 100% 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;

	image {
		width: 150upx;
		margin-top: 50upx;
	}

	.txt {
		color: #ffffff;
		font-size: 36upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20upx;
		text {
			margin-bottom: 5upx;
		}
	}
}

.bg2 {
	background-image: url(/static/img/user/bg2.png);
	margin-top: 60upx;
}
</style>
